<template>
    <HomePage :side-menu-default-openeds="sideMenuDefaultOpeneds" :side-menu-default-active="sideMenuDefaultActive">
        <div slot="breadcrumbmodule">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:20px;">
                <el-breadcrumb-item :to="{ path: '/redis/param' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>gemfire参数维护</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div slot="corechildmodule">
            <div id="paramTree">
                <el-tree
                    class="filter-tree"
                    :data="data"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode" style="width:200px;"
                    ref="tree">
                </el-tree>
            </div >

            <div id="tabsModule">

                <el-button
                    size="small"
                    @click="addTab(editableTabsValue)"
                >
                    add tab
                </el-button>

                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                        v-for="(item, index) in editableTabs"
                        :key="item.name"
                        :label="item.title"
                        :name="item.name"
                    >
                        {{item.content}}
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </HomePage>
</template>

<script>

    //引入主模块
    import HomePage from '@/views/homepage/HomePage'

    export default {
        name: "GemfireParam",
        components: {HomePage},
        data() {
            return {
                sideMenuDefaultOpeneds:['1'],
                sideMenuDefaultActive:"/gemfire/param",
                editableTabsValue: '2',
                editableTabs: [{
                    title: 'Tab 1',
                    name: '1',
                    content: 'Tab 1 content'
                }, {
                    title: 'Tab 2',
                    name: '2',
                    content: 'Tab 2 content'
                }],
                tabIndex: 2,
                filterText: '',
                data: [{
                    id: 1,
                    label: '系统参数',
                    children: [{
                        id: 4,
                        label: '服务代理参数表'

                    },{
                        id: 9,
                        label: '业务凭证参数表'

                    }]
                }, {
                    id: 2,
                    label: 'URL参数',
                    children: [{
                        id: 5,
                        label: '清分校验URL参数表'
                    }, {
                        id: 6,
                        label: '录入校验URL参数表'
                    }]
                }, {
                    id: 3,
                    label: '其他参数',
                    children: [{
                        id: 7,
                        label: '其他参数excel导出导入'
                    }, {
                        id: 8,
                        label: '交易发送参数表'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };

        },
        methods: {
            addTab(targetName) {
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: 'New Tab',
                    name: newTabName,
                    content: 'New Tab content'
                });
                this.editableTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }
        }
    }
</script>

<style type="text/css">

    #paramTree{
        width:200px;
        height:800px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        float:left;
    }

    #tabsModule{
        width:calc(100% - 210px);
        height:800px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        float:right;
    }

</style>
